<template>
  <div :class="pageName">
      <div class="form">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="店铺名称/店铺联系人">
                    <el-input v-model="searchForm.name" placeholder="店铺名称/店铺联系人"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="searchForm.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="店铺地区">
                    <el-cascader
                        :options="options"
                        v-model="searchForm.address">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="审核状态">
                    <el-select v-model="searchForm.status" placeholder="审核状态">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="店铺种类">
                    <el-select v-model="searchForm.class" placeholder="店铺种类">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click="onAdd">新建</el-button>
                </el-form-item>
            </el-form>
      </div>

      <div class="form-body">
          <el-table
            :data="tableData.dataList"
            border
            style="width: 100%">
            <el-table-column
                prop="id"
                label="店铺id">
            </el-table-column>
            <el-table-column
                prop="name"
                label="店铺名称">
            </el-table-column>
            <el-table-column
                prop="adress"
                label="店铺地址">
            </el-table-column>
            <el-table-column
                prop="class"
                label="店铺类别">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="people"
                label="店铺联系人">
            </el-table-column>
            <el-table-column
                prop="phone"
                label="店铺联系电话">
            </el-table-column>
            <el-table-column
                prop="status"
                label="审核状态">
            </el-table-column>
            <el-table-column
                prop="time"
                label="审核时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row, 'show')">详情</el-button>
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row, 'edit')">审核</el-button>
                    <el-button
                    size="mini"
                    @click="toFreeze(scope.$index, scope.row)">冻结</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="toBack(scope.$index, scope.row)">恢复</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="clearfix pt15">
            <div class="fr">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="tableData.total"
                    :page-size="10"
                    :current-page="tableData.currentPage"
                    @current-change="currentChange">
                </el-pagination>
            </div>
        </div>
      </div>
      <Approval />
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import pageMixin from "@/mixins/pageMixin";
import Approval from "./components/approval";

export default {
    mixins: [pageMixin],

    components: { Approval },

    data () {
        return {
            searchForm: {
                user: '',
                region: '',
                address: [],
                status: '',
                class: ''
            },
            options: [{
                value: 'zhinan',
                label: '指南',
                children: [{
                    value: 'shejiyuanze',
                    label: '设计原则',
                    children: [{
                    value: 'yizhi',
                    label: '一致'
                    }, {
                    value: 'fankui',
                    label: '反馈'
                    }, {
                    value: 'xiaolv',
                    label: '效率'
                    }, {
                    value: 'kekong',
                    label: '可控'
                    }]
                }, {
                    value: 'daohang',
                    label: '导航',
                    children: [{
                    value: 'cexiangdaohang',
                    label: '侧向导航'
                    }, {
                    value: 'dingbudaohang',
                    label: '顶部导航'
                    }]
                }]
            }],
            pageName: 'businessShop'
        }
    },

    computed: {
        ...mapGetters({
            tableData: 'businessShop/tableData',
            editData: 'businessShop/editData'
        })
    },

    created () {
        
    },

    methods: {
        toFreeze() {
            this.$confirm('确定冻结此店铺？冻结此店铺后，商户将不能对此店铺进行任何操作，用户也不能看到此店铺的商品。', '冻结店铺', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '成功!'
                });
            }).catch(() => {});
        },
        toBack() {
            this.$confirm('确定取消冻结此店铺？取消冻结此店铺后，该店铺将恢复为可用状态。', '恢复店铺', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '成功!'
                });
            }).catch(() => {});
        }
    }
}
</script>

<style >

</style>
